<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/*   1     +   100    取值：选择器被选中几率增加*/
			di    v#d1{
				width: 20%;
				height: 700px;
				/* 颜色色值 ：透明度：遮盖层  、左栏 */
				background: rgba(145, 45, 255, .7);
			}
			/*  最大宽度与最小宽度 */
			div#container{
				background: #0055ff;
			}
			div.box{
				background: #ff0e42;
				color: #fff;
				width: 80%;
				/* 最小宽度：设定 ，不能改变，移动端 */
	     			min-width: 500px;
					/* 最大宽度 ，设定  ,宽度最大上限600px,移动端*/
					max-width: 600px;
					/* 页面设定最大与最小宽高 、约定  移动端宽高比。页面错乱  */
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!--   最大宽度与最小宽度    ：
		自适应   ：编写页面在任何浏览器下正常显示 -->
		<div id="container">
			<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, cumque voluptates nulla laudantium voluptatem optio repudiandae doloribus fugiat, eligendi tenetur sit cum hic veritatis facilis ratione accusamus magni unde dolorum.</div>
		</div>
	</body>
</html>